---
title: "Cursor"
description: "Utilities for controlling the cursor style when hovering over an element."
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/cursor'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Auto

Use `cursor-auto` to allow the browser to change the cursor based on the current content (e.g. automatically change to `text` cursor when hovering over text).

```html rose
<template preview>
  <div class="cursor-auto max-w-xs p-2 bg-rose-200 mx-auto text-center">
    Hover over this text
  </div>
</template>

<div class="**cursor-auto** ...">
  Hover over this text
</div>
```

## Default

Use `cursor-default` to change the mouse cursor to always use the platform-dependent default cursor (usually an arrow).

```html amber
<template preview>
  <div class="cursor-default max-w-xs p-2 bg-amber-200 mx-auto text-center">
    Hover over this text
  </div>
</template>

<div class="**cursor-default** ...">
  Hover over this text
</div>
```

## Pointer

Use `cursor-pointer` to change the mouse cursor to indicate an interactive element (usually a pointing hand).

```html purple
<template preview>
  <div class="cursor-pointer max-w-xs p-2 bg-purple-200 mx-auto text-center">
    Hover me
  </div>
</template>

<div class="**cursor-pointer** ...">
  Hover me
</div>
```

## Wait

Use `cursor-wait` to change the mouse cursor to indicate something is happening in the background (usually an hourglass or watch).

```html emerald
<template preview>
  <div class="cursor-wait max-w-xs p-2 bg-emerald-200 mx-auto text-center">
    Hover me
  </div>
</template>

<div class="**cursor-wait** ...">
  Hover me
</div>
```

## Text

Use `cursor-text` to change the mouse cursor to indicate the text can be selected (usually an I-beam shape).

```html fuchsia
<template preview>
  <div class="cursor-text max-w-xs p-2 bg-fuchsia-200 mx-auto text-center">
    Hover me
  </div>
</template>

<div class="cursor-text ...">
  Hover me
</div>
```

## Move

Use `cursor-move` to change the mouse cursor to indicate something that can be moved.

```html indigo
<template preview>
  <div class="cursor-move max-w-xs p-2 bg-indigo-200 mx-auto text-center">
    Hover me
  </div>
</template>

<div class="**cursor-move** ...">
  Hover me
</div>
```

## Not Allowed

Use `cursor-not-allowed` to change the mouse cursor to indicate something can not be interacted with or clicked.

```html lightBlue
<template preview>
  <div class="cursor-not-allowed max-w-xs p-2 bg-light-blue-200 mx-auto text-center">
    Hover me
  </div>
</template>

<div class="**cursor-not-allowed** ...">
  Hover me
</div>
```

## Customizing

### Cursors

By default, Tailwind provides six `cursor` utilities. You change, add, or remove these by editing the `theme.cursor` section of your Tailwind config.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      cursor: {
        auto: 'auto',
        default: 'default',
        pointer: 'pointer',
-       wait: 'wait',
        text: 'text',
-       move: 'move',
        'not-allowed': 'not-allowed',
+       crosshair: 'crosshair',
+       'zoom-in': 'zoom-in',
      }
    }
  }
```

### Variants

<Variants plugin="cursor" />

### Disabling

<Disabling plugin="cursor" />
